import { Link, Outlet, useLocation } from 'umi';
import { Breadcrumb, ConfigProvider, Layout as LHLayout, theme } from 'antd';

import LHSider from './Sider';
import LHHeader from './Header';
import { items as MenuItems } from './Sider/config'
import { useEffect, useState } from 'react';
import { ItemType } from 'antd/es/menu/interface';
import React from 'react';

const { Content, Footer } = LHLayout

export default function Layout() {

  const location = useLocation()

  // 通过 location.pathname 匹配 MenuItems 中的 key，找到 key 对应的 label，来设置 Breadcrumb 的 items
  const [breadcrumbItems, setBreadcrumbItems] = useState<any[]>([])
  useEffect(() => {
    const { pathname } = location;
    if (pathname === '/') {
      setBreadcrumbItems([{ title: 'DashBoard' }]);
      return;
    }
    const items = pathname.split('/').slice(1);
    const newItems = items.map((item, index) => {
      const path = `/${items.slice(0, index + 1).join('/')}`;
      const menuItem = MenuItems.find(menuItem => {
        return menuItem?.key === path || menuItem.children?.find(child => child.key === path);
      });
      let displayPath: React.ReactNode = item;
      let isLink = false;

      if (menuItem) {
        // 有 children，尝试在 children 中找 key 匹配的项
        if (menuItem.children) {
          const child = menuItem.children.find(child => child.key === path);
          if (child && child.label) {
            if (React.isValidElement(child.label) && child.label.type === Link) {
              displayPath = child.label.props.children;
              isLink = true;
            } else if (typeof child.label === 'string') {
              displayPath = child.label;
            }
          } else if (typeof menuItem.label === 'string') {
            displayPath = menuItem.label;
          }
        } else if (menuItem.label) {
          if (React.isValidElement(menuItem.label) && menuItem.label.type === Link) {
            displayPath = menuItem.label.props.children;
            isLink = true;
          } else if (typeof menuItem.label === 'string') {
            displayPath = menuItem.label;
          }
        }
      }
      // 最后一级不可点击
      if (index === items.length - 1 || !isLink) {
        return { title: displayPath };
      } else {
        return { title: <Link to={path}>{displayPath}</Link> };
      }
    });
    setBreadcrumbItems(newItems);
  }, [location]);


  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();


  return (
    <LHLayout>
      <LHHeader />
      <LHLayout>
        <LHSider />
        <LHLayout style={{ padding: '0 16px 16px', height: 'calc(100vh - 64px)' }}>
          <Breadcrumb
            items={breadcrumbItems}
            style={{ margin: '16px 0' }}
          />
          <Content
            style={{
              padding: 20,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
              overflow: 'hidden',
              overflowY: 'auto',
              scrollbarWidth: 'none'
            }}
          >
            <Outlet />
          </Content>
          <Footer style={{ padding: '16px 0 0 0', textAlign: 'center' }}>
            Custom Components ©{new Date().getFullYear()} Created by Han Liu
          </Footer>
        </LHLayout>
      </LHLayout>
    </LHLayout>
  );
}
